import { Row, Col, Button, Select, Input, List, Avatar, Tag } from "antd"
import { annoTypes } from "../../utils"
import { useEffect, useState } from "react"
import { connect } from "react-redux"
import { getAnnoList } from "../../redux/actions"
import { observer } from "mobx-react"
import { mbdata } from "../../mobx/data"
import { Link } from "react-router-dom"
import { baseURL } from "../../api/request"
import moment from "moment"
import { UserOutlined } from "@ant-design/icons"
import { $http } from "../../api"
const { Option } = Select
const { Search } = Input
function AnnoList({ list, dispatch }) {
  const { userInfo } = mbdata
  const [type, setType] = useState(0)
  useEffect(() => {
    dispatch(getAnnoList())
  }, [])
  const todoSearchByType = () => {
    dispatch(getAnnoList({ type: type }))
  }
  const startSearch = (value) => {
    dispatch(getAnnoList({ keyword: value }))
  }
  const getSelectValue = (value) => {
    setType(value)
  }
  const deleteOne = (item) => {
    $http.delannoone({
      _id: item._id
    })
      .then(res => {
        if (res.code == 200) {
          // 删除
          var arr = list.filter(val => val._id != item._id)
          dispatch({
            type: "getAnnoList",
            payload: arr
          })
        }
      })
  }
  return (
    <div>
      <h2> 公告列表</h2>
      <Row className="" style={{ marginTop: 20, display: 'flex' }}>
        <Col className="" span={10} style={{ display: 'flex' }}>
          <Search placeholder="请输入搜索关键字" enterButton onSearch={startSearch} />
        </Col>
        <Col className="" type="primary" offset={2} span={8} style={{ display: 'flex' }} >
          {/* 搜索筛选 */}
          <Select placeholder="请选择" style={{ width: 120 }} onChange={getSelectValue}>
            {
              annoTypes.map((l, i) => (
                <Option key={i} value={l.value} >
                  {l.text}
                </Option>
              ))
            }
          </Select>
          <Button type="primary" size="mini" onClick={todoSearchByType}>点击搜索</Button>
        </Col>
      </Row >

      <Row className="" style={{ marginTop: 20 }}>
        <Col className="" span={20}>
          <List
            className="demo-loadmore-list"
            itemLayout="horizontal"
            dataSource={list}
            renderItem={item => (
              <List.Item
                actions={
                  [
                    (userInfo.account == item.author) && <Link to={'/main/anno/update?_id=' + item._id}>修改</Link>,
                    (userInfo.account == item.author) && <a onClick={() => deleteOne(item)}> 删除</a>
                  ]
                }
              >
                <List.Item.Meta
                  avatar={
                    item.avatar ?
                      <Avatar src={item.avatar.replace(/public/, baseURL)} />
                      :
                      <Avatar shape="circle" icon={<UserOutlined />} />
                  }
                  title={<Link to={'/main/anno/detail/' + item._id} >{item.title}</Link>}
                  description={item.content}
                />
                <div>
                  <Tag color={annoTypes.find(v => v.value == item.type).color}>
                    {annoTypes.find(v => v.value == item.type).text}
                  </Tag>
                  {
                    moment(item.time).format('YYYY-MM-DD hh:mm:ss')
                  }
                  <span>
                    {' ' + item.author}
                  </span>
                </div>
              </List.Item>
            )}
          >

          </List>

        </Col>
      </Row >
    </div>
  )
}


export default connect(
  state => ({
    list: state.getIn(["data", "annoList"])
  })
)(observer(AnnoList))